<template>
  <div id="wealth-container">
    <!--  头部  -->
    <div class="container middle">
      <div class="page-header">
        <div class="page-title">
          <h1>我的财富</h1>
          <p style="color:#999999;font-size: 12px"> <span style="color: red;">*</span>注：新用户充值需要绑定银行卡</p>
        </div>
        <div class="page-extend">
        </div>
      </div>
      <div class="page-body">
        <div class="my-wealth">
          <div class="wealth-info">
            <div class="wealth-tip" style="font-size: 18px">账户余额（元）</div>
            <div class="wealth-money" style="font-size: 20px"><span style="margin-right: 20px">100000.00</span>绑定银行卡</div>
          </div>
          <div class="wealth-operate" style="display: flex;align-items: center;">
            <div class="wealth-btn">充值</div>
            <div class="wealth-btn" style="margin-left: 30px">提现</div>
          </div>
        </div>
        <!--        -->
        <div class="" style="display: flex;align-items: center;margin-top: 15px">
          <img style="width: 25px;height: 26px" src="~@/assets/img/center/recharge@2x.png" alt="">
          <span style="font-size: 22px;margin-left: 20px">收支信息</span>
        </div>
        <el-table
          :header-cell-style="getRowClass"
          :data="tableData"
          border
          style="width: 100%;margin-top: 20px">
          <el-table-column
            prop="trade_sn"
            label="流水号"
            align="center">
          </el-table-column>
          <el-table-column
            prop="time"
            label="时间"
            align="center">
          </el-table-column>
          <el-table-column
            prop="step"
            align="center"
            label="操作环节">
          </el-table-column>
          <el-table-column
            prop="money"
            align="center"
            label="金额（元）">
          </el-table-column>
          <el-table-column
            prop="type"
            align="center"
            label="收支渠道">
          </el-table-column>
        </el-table>
        <!-- pagination  -->
        <div class="pagination" style="margin-top: 25px">
          <el-pagination
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyWealth",
  data() {
    var data = [];
    for (var i = 0; i< 10; i++) {
      data.push({
        id: i,
        trade_sn: i + '211203456788das',
        time: '2021-10-23',
        step: '债权交易',
        money: '10000.00',
        type: '银联支付'
      })
    }
    return {
      tableData: data
    }
  },
  created(){
    this.getDataList()
  },
  methods: {
    getRowClass({rowIndex}) {
      if (rowIndex === 0) {
        return 'background: #F9FAFE;height: 50px;color: #333;'
      } else {
        return ''
      }
    },
    getDataList(){
      this.$util.post('api/flow/getAmount',{}).then(res=>{
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

  .my-wealth {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    background: #639DFF;
    border-radius: 4px;
    margin-bottom: 35px;
  }

  .my-wealth .wealth-tip {
    font-size: 18px;
    margin-bottom: 10px;
  }
  .my-wealth .wealth-money {
    font-size: 18px;
  }
  .my-wealth .wealth-money span {
    font-size: 24px;
  }

  .wealth-btn {
    color: #4C9FFF;
    width: 130px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: linear-gradient(9deg, #E1EBF7 0%, #FFFFFF 100%);
    border-radius: 6px;
    font-size: 22px;
  }
</style>
